<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>HTML5 Canvas圆盘抽奖应用DEMO演示</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
    <style>
      * {
        padding: 0px;
        margin: 0px;
        font-size: 16px;
        font-family: "Microsoft YaHei";
      }
      .xttblog_box {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        position: relative;
      }
      .xttblog_box canvas {
        position: absolute;
      }
      #xttblog_canvas {
        background-color: white;
        border-radius: 100%;
        transition: transform 3s;
        transform-origin: 50% 50%;
      }
      #xttblog01,
      #xttblog03 {
        left: 50px;
        top: 50px;
        z-index: 30;
      }
      #black_canvas {
        left: 75px;
        top: 75px;
        z-index: 20;
      }

      .taoge_btn {
        width: 80px;
        height: 80px;
        left: 50%;
        top: 50%;
        border-radius: 100%;
        position: absolute;
        cursor: pointer;
        border: none;
        background: transparent;
        outline: none;
        z-index: 40;
        transform: translate(-50%, -50%);
      }
    </style>

    <script>
      window.$ = (id) => document.querySelector(id);

      window.addEventListener("DOMContentLoaded", function () {
        //旋转角度
        var angles;
        //可抽奖次数
        var clickNum = 2;
        //旋转次数
        var rotNum = 0;
        //中奖公告
        var notice = null;
        //转盘初始化
        var color = [
          "#626262",
          "#787878",
          "rgba(0,0,0,0.5)",
          "#DCC722",
          "white",
          "#FF4350",
        ];
        var info = [
          "谢谢参与",
          " 1000",
          " 10",
          " 500",
          " 100",
          " 4999",
          " 1",
          " 20",
        ];
        var info1 = [
          "再接再厉",
          "  元",
          "  元",
          " 淘金币",
          "  元",
          " 淘金币",
          "  元",
          " 淘金币",
        ];
        canvasDraw();
        $("#tupBtn").addEventListener("click", function () {
          if (clickNum >= 1) {
            //可抽奖次数减一
            clickNum = clickNum - 1;
            //转盘旋转
            runCup();
            //转盘旋转过程“开始抽奖”按钮无法点击
            $("#tupBtn").setAttribute("disabled", true);
            //旋转次数加一
            rotNum = rotNum + 1;
            //“开始抽奖”按钮无法点击恢复点击
            setTimeout(function () {
              alert(`中奖结果->${notice}`);
              $("#tupBtn").removeAttribute("disabled");
            }, 2000);
          } else {
            alert("亲，抽奖次数已用光！只能抽2次");
          }
        });

        //转盘旋转
        function runCup() {
          probability();
          var degValue = "rotate(" + angles + "deg" + ")";
          console.log("degValue", degValue);
          $("#xttblog_canvas").style.transform = degValue;
        }

        //各奖项对应的旋转角度及中奖公告内容
        function probability() {
          //获取随机数
          var num = parseInt(Math.random() * (8 - 0 + 0) + 0);
          var quan = 360 * 3 + 360 * 3 * rotNum; // 转3圈
          angles = quan + num * 45;
          //概率
          notice = info[num ? 8 - num : 0] + info1[num ? 8 - num : 0];
          console.log("num=>", num);
          console.log("angles=>", angles);
        }

        //绘制转盘
        function canvasDraw() {
          var canvas = document.getElementById("xttblog_canvas");
          var canvas01 = document.getElementById("xttblog01");
          var canvas03 = document.getElementById("xttblog03");
          var black02 = document.getElementById("black_canvas");
          var ctx = canvas.getContext("2d");
          var ctx1 = canvas01.getContext("2d");
          var ctx3 = canvas03.getContext("2d");
          var ctx2 = black02.getContext("2d");
          createCircle();
          createCirText();
          initPoint();

          //外圆
          function createCircle() {
            var fen = 8; // 一个园分成8份
            var startAngle = 0; //圆形的开始弧度
            var endAngle = 0; //圆形的终止弧度
            //画一个8等份扇形组成的圆形 --换算公式   ( Math.Pi * 2 ) * 角度自增/  N  ,角度自增 = 0 ... n
            for (var i = 0; i < fen; i++) {
              //   Math.PI * 2 * (i / fen) - Math.PI * (1 / fen)  和圆形文字对齐
              startAngle = Math.PI * 2 * (i / fen) - Math.PI * (1 / fen);
              endAngle = startAngle + Math.PI * 2 * (1 / fen);
              ctx.save();
              ctx.beginPath();
              ctx.arc(150, 150, 100, startAngle, endAngle, false);
              ctx.lineWidth = 120;
              if (i % 2 == 0) {
                ctx.strokeStyle = color[0];
              } else {
                ctx.strokeStyle = color[1];
              }
              ctx.stroke();
              ctx.restore(); // 颜色/绘制线段的宽度出栈 strokeStyle/lineWidth
            }
          }

          //各奖项
          function createCirText() {
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillStyle = color[3];
            var fen = 8; // 一个圆分成8份
            var step = (2 * Math.PI) / fen;

            for (var i = 0; i < fen; i++) {
              ctx.save();
              ctx.beginPath();
              ctx.translate(150, 150); // 偏移圆中心
              ctx.rotate(0);
              ctx.rotate(i * step);
              ctx.font = "20px Microsoft YaHei";
              ctx.fillStyle = color[3];
              ctx.fillText(info[i], 0, -120, 60);
              ctx.font = "14px Microsoft YaHei";
              ctx.fillText(info1[i], 0, -95, 60);
              ctx.closePath();
              ctx.restore();
            }
          }

          function initPoint() {
            //箭头指针
            ctx1.beginPath();
            ctx1.moveTo(100, 24);
            ctx1.lineTo(90, 62);
            ctx1.lineTo(110, 62);
            ctx1.lineTo(100, 24);
            ctx1.fillStyle = color[5];
            ctx1.fill();
            ctx1.closePath();
            //中间小圆
            ctx3.beginPath();
            ctx3.arc(100, 100, 40, 0, Math.PI * 2, false);
            ctx3.fillStyle = color[5];
            ctx3.fill();
            ctx3.closePath();
            //小圆文字
            ctx3.font = "Bold 20px Microsoft YaHei";
            ctx3.textAlign = "start";
            ctx3.textBaseline = "middle";
            ctx3.fillStyle = color[4];
            ctx3.beginPath();
            ctx3.fillText("开始", 80, 90, 40);
            ctx3.fillText("抽奖", 80, 110, 40);
            ctx3.fill();
            ctx3.closePath();
            // //中间圆圈
            ctx2.beginPath();
            ctx2.arc(75, 75, 75, 0, Math.PI * 2, false);
            ctx2.fillStyle = color[2];
            ctx2.fill();
            ctx2.closePath();
          }
        }
      });
    </script>
  </head>
  <body>
    <div class="xttblog_box">
      <canvas id="xttblog_canvas" width="300px" height="300px">抽奖圆盘</canvas>
      <canvas id="xttblog01" width="200px" height="200px">红色箭头</canvas>
      <canvas id="xttblog03" width="200px" height="200px">红色圆圈</canvas>
      <canvas id="black_canvas" width="150px" height="150px">黑色圆圈</canvas>
      <button id="tupBtn" class="taoge_btn"></button>
    </div>

    <!-- acacacac  demo-->
    <canvas id="ac" width="1200px" height="1200px">抱歉！浏览器不支持。</canvas>
  </body>

  <script>
    // acacacac  demo
    function drawScreen() {
      var canvas_AC = document.getElementById("ac");
      var ctx = canvas_AC.getContext("2d");
      ctx.fillStyle = "#FA6900";
      ctx.shadowOffsetX = 5;
      ctx.shadowOffsetY = 5;
      ctx.shadowBlur = 4;
      ctx.shadowColor = "rgba(204, 204, 204, 0.5)";
      ctx.fillRect(10, 10, 15, 150);
      ctx.save(); // 将第一个状态推到堆栈中

      ctx.fillStyle = "#f36";
      ctx.shadowOffsetX = 10;
      ctx.shadowOffsetY = 10;
      ctx.shadowBlur = 4;
      ctx.shadowColor = "rgba(204, 204, 204, 0.5)";
      ctx.fillRect(50, 10, 30, 150);
      ctx.save(); // 将第二个状态推到堆栈中

      ctx.fillStyle = "#A7DBD7";
      ctx.shadowOffsetX = 15;
      ctx.shadowOffsetY = 15;
      ctx.shadowBlur = 4;
      ctx.shadowColor = "rgba(204, 204, 204, 0.5)";
      ctx.fillRect(110, 10, 45, 150);
      ctx.save(); // 将第三个状态推到堆栈中

      ctx.restore(); // 取出堆栈3（第三个状态）
      ctx.beginPath();
      ctx.arc(225, 75, 22, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();

      ctx.restore(); // 取出堆栈2（第二个状态）
      ctx.beginPath();
      ctx.arc(320, 75, 15, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();

      ctx.restore(); // 取出堆栈1（第一个状态）
      ctx.beginPath();
      ctx.arc(400, 75, 8, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();
    }
    drawScreen();
  </script>
</html>
